export default {
    // 假数据
    banner_data: [
        {name:'banner02.jpg',type:'jpg'},
        {name:'banner03.jpg',type:'jpg'},
        {name:'banner04.jpg',type:'jpg'},
        {name:'banner01.jpg',type:'jpg'},
    ],
    bannerNum: 0, //轮播图数量
    bannerIndex: 0 , //现在播放到第几个图片
    bannerTime: 0, //左右切换的节流
    bannerTimeLimit: 500, //用户连续点击的节流限制时间
    picSize: 100, //一张图片所占的长度（百分比）
    timer: null, //自动播放
    init : function() {
        this.banner_load();
        $('.banner .go-left').on('click',(e) => {this.banner_sub()})
        $('.banner .go-right').on('click',((e) => {this.banner_add()}))  
        $('.banner ol li').on('click',(e)=>{
            let index = $('.banner ol li').index(e.target);
            this.bannerIndex = index;
            this.banner_go(index);
        })
        $('.banner').on('mouseenter',()=>{
            clearInterval(this.timer);
            this.timer = null;
        })
        $('.banner').on('mouseleave',()=>{
            if(this.time == null){
                this.timer = setInterval(() => {
                    this.banner_add();
                }, 1500)
            }
        }) 
        // this.timer = setInterval(() => {
        //     this.banner_add();
        // }, 1500)
    },
    // 把轮播图假数据放进html里面
    banner_load: function() {
        let strUl ='';
        let strOl ='';
        this.banner_data.forEach((item,index)=>{
            let picUrl = require('../../images/index/small/'+item.name);
            let picUrlReal = require('../../images/index/'+item.name);
            strUl += `<li> <img src='${picUrl}' data-src='${picUrlReal}' alt="" class='lazyload' > </li>`;
            strOl += `<li index = ${index} class="${index==0?'active':''}"></li>`;
        }) 
        // 无缝连接
        strUl += `<li> <img src='${require('../../images/index/'+this.banner_data[0].name)}' alt=""> </li>`;
        this.bannerNum = this.banner_data.length;
        let ulWid = (this.bannerNum+1) * this.picSize;
        $('.banner ul').css('width',ulWid + '%')
        $('.banner ul').html(strUl);
        $('.banner ul li').css('width', 100/this.bannerNum + '%');
        $('.banner ol').html(strOl);
        setTimeout(()=>{
            $('.banner ul .lazyload').lazyload();
        },1000)
    },
    // 跑到第几个轮播图,第二个参数是执行完动画后的钩子
    banner_go: function(index,callback) {
        let leftPrec = index * this.picSize + '%';
        $('.banner ul').animate({left: '-'+leftPrec},this.bannerTimeLimit-20,callback);
        if(index == this.bannerNum) 
            index = 0;
        $('.banner ol li')  .eq(index)
                            .addClass('active')
                            .siblings()
                            .removeClass('active');
    },
    // 往左，bannerIndex--
    banner_sub: function() {
        let now = new Date().getTime();
        if(now - this.bannerTime < this.bannerTimeLimit){
            // console.log('out of time1');
            return ;
        }
        this.bannerTime = now;
        //无缝连接逻辑
        if(this.bannerIndex <= 0){
            // 直接跳转到最后的一张，再 -- 
            this.bannerIndex = this.bannerNum;
            $('.banner ul').css({left: '-'+this.bannerIndex * this.picSize + '%'});
        }
        this.bannerIndex --;
        this.banner_go(this.bannerIndex)

    },
    // 往右，bannerIndex++
    banner_add: function() {
        let now = new Date().getTime();
        if(now - this.bannerTime < this.bannerTimeLimit){
            // console.log('out of time2');
            return ;
        }
        this.bannerTime = now;
        this.bannerIndex ++;
        this.banner_go(this.bannerIndex,()=>{
            // 无缝连接逻辑
            if(this.bannerIndex >= this.bannerNum){
                // 若是最后一页，直接跳转回第一页
                // console.log('最后一页');
                this.bannerIndex = 0;
                $('.banner ul').css({left: 0 + '%'});
            }
        })
    }

}